import React, {createRef} from "react"
import './index.scss'
import ContentView from "../../components/ContentView"
import ScrollContent from "../../components/ScrollContent"
import Block from '../../components/Wrapper/Block'
import {List,InputItem,DatePicker,Picker,Toast} from 'antd-mobile'
import {productType, publishProduct} from '../../http/api'
import formatDate from '../../utils/formatDate'
import storage from '../../utils/storage'
export default class BuyPublish extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        unitType:0,
                        productType:[],
                        expireTime:'',
                        supplyType:[],
                }
                this.amountRef = createRef()
                this.priceRef = createRef()
                this.productTitleRef = createRef()
                this.productDescRef = createRef()
        }
        componentWillMount () {
                this.getOptionsRenderValue()
        }
        //设置类别商品options
        getOptionsRenderValue=()=>{
                productType().then(res=>{
                        let {list} = res
                        const productType = list.map(item=>{
                                const {codeName,codeValue} = item
                                return {
                                        label:codeName,
                                        value:codeValue
                                }
                        })
                        this.setState({
                                productType
                        })
                })
        }
        //发布
        handleOnSubmit = ()=>{
                let {supplyType,expireTime,unitType} = this.state
                const unit = unitType+1
                const amount = this.amountRef.current.state.value
                const price = this.amountRef.current.state.value
                const productTitle = this.productTitleRef.current.value
                const productDesc = this.productDescRef.current.value
                supplyType = !!supplyType?supplyType[0]:null
                expireTime = formatDate(expireTime)
                if ([!!amount, !!price, !!productTitle, !!productDesc, !!supplyType, !!expireTime,!!unit].includes (false)) {
                        Toast.fail('发布信息填写未完善')
                        return
                }
                publishProduct({
                        amount,
                        price,
                        productTitle,
                        productDesc,
                        supplyType,
                        expireTime,
                        unit
                }).then()
        }
        render () {
                const {unitType,productType,expireTime,supplyType} = this.state
                //单位选择radio
                const radioRender = <div className='radio-wrapper'>
                        <div
                                onClick={()=>{this.setState({unitType:0})}}
                                className={`radio-item ${unitType===0&&'active'}`}>/公斤</div>
                        <div
                                onClick={()=>{this.setState({unitType:1})}}
                                className={`radio-item ${unitType===1&&'active'}`}>/吨</div>
                </div>
                //数量单位渲染
                const unitExtraRender = <span className='unit-type'>{['公斤','吨'][unitType]}</span>
                return <ContentView title='发布求购' className='buy-publish'>
                        <ScrollContent>
                                <Block>
                                        <div className="input-title-wrapper">
                                                <div className="tag-wrapper">
                                                        <span className="tag">求</span>
                                                </div>
                                                <div className="input-wrapper">
                                                        <input type="text" placeholder='请在此处填入商品标题' ref={this.productTitleRef}/>
                                                </div>
                                        </div>
                                        <div className="text-area-wrapper">
                                                <textarea  rows="10"  placeholder='请在此处输入商品描述' ref={this.productDescRef}/>
                                        </div>
                                </Block>
                                <Block>
                                        <List>
                                                <InputItem placeholder='请输入单价' extra={radioRender} ref={this.priceRef}>单价</InputItem>
                                                <InputItem placeholder='请输入数量' extra={unitExtraRender} ref={this.amountRef}>数量</InputItem>
                                                <List.Item arrow="horizontal" extra='请选择所在地'>所在地</List.Item>
                                                <Picker
                                                        data={productType}
                                                        title="选择类型"
                                                        extra="请选择品种类型"
                                                        value={supplyType}
                                                        onChange={supplyType=>this.setState({supplyType})}
                                                        cols={1}
                                                >
                                                        <List.Item arrow="horizontal">品种类型</List.Item>
                                                </Picker>
                                                <DatePicker
                                                        mode="date"
                                                        title="日期选择"
                                                        extra="请选择有效期"
                                                        format='YYYY-MM-DD'
                                                        minDate={new Date()}
                                                        value={expireTime}
                                                        onChange={expireTime => this.setState({ expireTime })}
                                                >
                                                        <List.Item arrow="horizontal" >有效期</List.Item>
                                                </DatePicker>
                                                <List.Item className='phone-item' extra={storage.get('phone')}>联系方式</List.Item>
                                        </List>
                                </Block>
                                <div className="submit-btn-wrapper">
                                        <div className="submit-btn" onClick={this.handleOnSubmit}>
                                                发布求购
                                        </div>
                                </div>
                        </ScrollContent>
                </ContentView>
        }

}
